<template>
<div>
    <h3>图片分享页面</h3>
    <!-- 顶部分类滑动条区域 -->
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a :class="['mui-control-item',item.id == 0?' mui-active':'']" v-for="item in cates" :key="item.id" @click="getimgList(item.id)">
                    {{ item.title }}
                </a>
            </div>
        </div>
    </div>

    <!-- 图片列表区域 -->
    <ul class="img-list">
        <router-link v-for="(item,index) in list" :key="index" tag="li" :to="'/index/imginfo/'+index">
            <img v-lazy="item.url" alt="">
        </router-link>
    </ul>
</div>
</template>

<script>
import mui from '../../mui/js/mui.min.js'  
export default {
    data(){
        return {
            cates:[],
            list:[]
        }
    },
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        })
    },
    created(){
        this.getCategory(),
        this.getimgList(0)
    },
    methods:{
        getCategory(){
            this.cates.push({title:'全部',id:0},{title:'家居生活',id:1},{title:'摄影设计',id:2},{title:'明星美女',id:3},{title:'明星写真',id:4},{title:'清纯甜美',id:5},{title:'古典美女',id:6})
        },
        getimgList(id){
            this.list = []
            var img1 = {url:'http://iph.href.lu/300x300?text=%E5%AE%B6%E5%B1%85%E7%94%9F%E6%B4%BB',id:11}
            var img2 = {url:'http://iph.href.lu/300x300?text=%E6%91%84%E5%BD%B1%E8%AE%BE%E8%AE%A1',id:22}
            var img3 = {url:'http://iph.href.lu/300x300?text=%E6%98%8E%E6%98%9F%E7%BE%8E%E5%A5%B3',id:33}
            var img4 = {url:'http://iph.href.lu/300x300?text=%E6%98%8E%E6%98%9F%E5%86%99%E7%9C%9F',id:44}
            var img5 = {url:'http://iph.href.lu/300x300?text=%E6%B8%85%E7%BA%AF%E7%94%9C%E7%BE%8E',id:55}
            var img6 = {url:'http://iph.href.lu/300x300?text=%E5%8F%A4%E5%85%B8%E7%BE%8E%E5%A5%B3',id:66}
            switch(id){
                case 0:this.list.push(img1,img2,img3,img4,img5,img6);break;
                case 1:this.list.push(img1,img1,img1,img1,img1,img1,img1,img1,img1,img1,img1,img1);break;
                case 2:this.list.push(img2,img2,img2,img2,img2,img2,img2,img2,img2,img2,img2,img2);break;
                case 3:this.list.push(img3,img3,img3,img3,img3,img3,img3,img3,img3,img3,img3,img3);break;
                case 4:this.list.push(img4,img4,img4,img4,img4,img4,img4,img4,img4,img4,img4,img4);break;
                case 5:this.list.push(img5,img5,img5,img5,img5,img5,img5,img5,img5,img5,img5,img5);break;
                case 6:this.list.push(img6,img6,img6,img6,img6,img6,img6,img6,img6,img6,img6,img6);break;
            }
        }
    }
}
</script>

<style lang="less" scoped>
 * {
    touch-action: pan-y;
 }
 .img-list{
     list-style: none;
     margin: 0;
     padding: 10px;
     padding-bottom: 0;
     li{
         background-color: #cccccc;
         text-align: center;
         margin-bottom: 10px;
         box-shadow: 0 0 8px #999; 
        img{
            width: 100%;
            vertical-align: middle;
        }
        img[lazy="loading"]{
            width: 40px;
            height: 300px;
            margin: auto;
            }
        }
     
 }
</style>